<div class="header bg-gradient-danger py-7 py-lg-8">
  <div class="container">
    <div class="header-body text-center mb-7">
      <div class="row justify-content-center">
        <div class="col-lg-5 col-md-6">
          <h1 class="text-white">صندوق قرض الحسنه حضرت ولی عصر عج</h1>
          <p class="text-lead text-light">ورود به سیستم</p>
        </div>
      </div>
    </div>
  </div>
  <div class="separator separator-bottom separator-skew zindex-100">
    <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="#">
      <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
    </svg>
  </div>
</div>
<!-- Page content -->
<div class="container mt--9">
  <div class="row justify-content-center">
    <div class="col-lg-5 col-md-7">
      <div class="card bg-secondary shadow border-0">

        <div class="card-body px-lg-5 py-lg-5">
          <div class="text-center text-muted mb-4">
            <small style="font-family: VazirBold">نام کاربری و رمز عبور را وارد کنید</small>
          </div>
          <form role="form" [formGroup]="formGroup" style="font-family: Vazir">
            <div class="form-group mb-3">
              <div class="input-group input-group-alternative">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="ni ni-email-83"></i></span>
                </div>
                <input style="direction: rtl" formControlName="username" class="form-control" placeholder="کد ملی"
                       type="text">
              </div>
            </div>
            <div class="form-group">
              <div class="input-group input-group-alternative">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
                </div>
                <input style="direction: rtl" formControlName="password" class="form-control" placeholder="رمز عبور"
                       type="password">
              </div>
            </div>
            <div class="custom-control custom-control-alternative custom-checkbox">
              <input class="custom-control-input" id=" customCheckLogin" type="checkbox">
              <label class="custom-control-label" for=" customCheckLogin">
                <span class="text-muted">ذخیره رمز عبور</span>
              </label>
            </div>
            <div class="text-center">
              <button type="button" (click)="LoginForm()" class="btn btn-primary my-4">ورود</button>
            </div>
          </form>
        </div>
      </div>
      <!--      <div class="row mt-3">-->
      <!--        <div class="col-6">-->
      <!--          <a href="javascript:void(0)" class="text-light"><small>Forgot password?</small></a>-->
      <!--        </div>-->
      <!--        <div class="col-6 text-right">-->
      <!--          <a href="javascript:void(0)" class="text-light"><small>Create new account</small></a>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
  </div>
</div>
<ngx-loading [show]="loading" [config]="{animationType: ngxLoadingAnimationTypes,
                  primaryColour: '#ffffff',
                   secondaryColour: '#006ddd',
                   backdropBorderRadius: '3px'}"></ngx-loading>

